<template>
	<button ref="wui-button" :style="[colorComputed]"
		:class="['wui-button', plain ? 'wui-button-plain-' + type : '', 'wui-button-type-' + type]"
		hover-class="wui-button-hover" :disabled="disabled" :lang="lang" :open-type="openType"
		@click="e => $emit('click', e)">
		<text class="iconfont icon-wui-loading" v-if="loading"></text>
		<slot></slot>
	</button>
</template>

<script>
	export default {
		name: 'w-button',
		props: {
			type: {
				//按钮类型
				type: String,
				default: 'primary'
			},
			disabled: {
				//是否禁用
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: false
			},
			plain: {
				type: Boolean,
				default: false
			},
			lang: {
				type: String,
				default: 'zh_CN'
			},
			openType: {
				type: String
			}
		},
		computed: {
			colorComputed() {
				let {
					primary,
					success,
					warning,
					info
				} = this.uniWuiConfig.theme;
				return {
					'--primary': primary,
					'--success': success,
					'--warning': warning,
					'--info': info
				};
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 按钮loading动画 */
	@keyframes buttonAnimation {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	button {
		padding: 0;
		margin: 0;
	}

	.wui-button {
		color: #fff;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
		border-width: 0;

		.iconfont {
			animation: buttonAnimation 2s linear infinite;
			margin-right: 10rpx;
		}
	}

	.wui-button-hover {
		opacity: 0.8;
		transform: translateX(3rpx) translateY(3rpx);
	}

	.wui-button-type-primary {
		color: #34495e;
		background-color: var(--primary);
	}

	.wui-button-type-success {
		background-color: var(--success);
	}

	.wui-button-type-warning {
		background-color: var(--warning);
	}

	.wui-button-type-info {
		background-color: var(--info);
	}

	.wui-button-plain-primary,
	.wui-button-plain-success,
	.wui-button-plain-warning,
	.wui-button-plain-info {
		position: relative;
		background-color: transparent;
		color: #34495e;
	}


	.wui-button-plain-primary:after,
	.wui-button-plain-success:after,
	.wui-button-plain-warning:after,
	.wui-button-plain-info:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200%;
		height: 200%;
		border-width: 1px;
		border-style: solid;
		transform: scale(0.5);
	}

	.wui-button-plain-primary:after {
		border-color: var(--primary);
	}

	.wui-button-plain-success:after {
		border-color: var(--success);
	}

	.wui-button-plain-warning:after {
		border-color: var(--warning);
	}

	.wui-button-plain-info:after {
		border-color: var(--info);
	}
</style>
